<%@page contentType="text/html;charset=UTF-8"%>
<%@include file="../common.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Project Infor</title>
	<link href="${ctx}/resources/css/project/project.css" rel="stylesheet">

	<link href="${ctx}/resources/css/bootstrap/bootstrap.min.css" rel="stylesheet">
	<script src="${ctx}/resources/js/terminal/jquery-1.7.1.min.js"></script>
	<script src="${ctx}/resources/js/terminal/jquery.mousewheel-min.js"></script>
	<script src="${ctx}/resources/js/terminal/jquery.terminal-min.js"></script>
	<script src="${ctx}/resources/js/terminal/unix_formatting.js"></script>
	<link href="${ctx}/resources/css/terminal/jquery.terminal.css" rel="stylesheet"/>
    <%@include file="../common/head.jsp"%>
	<link href="${ctx}/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">

	<c:set var="active" value="jobs"/>
	<style type="text/css">
		.pre-scrollable{
			max-height:640px;
			font-size:9px;
			overflow-y:scroll;
			overflow-x:auto;
		}
	</style>

</head>
<body>
<div class="p10 bg-fff">
	<div class="ant-breadcrumb">
            <span>
                <span class="ant-breadcrumb-link ">首页</span>
                <span class="ant-breadcrumb-separator">/</span>
            </span>
            <span>
                <a class="ant-breadcrumb-link" href="${ctx}/project/list">项目列表</a>
                <span class="ant-breadcrumb-separator">/</span>
            </span>
            <span>
                <a class="ant-breadcrumb-link" href="${ctx}/version/list?projId=${project.id}">${project.projName}-列表</a>
                <span class="ant-breadcrumb-separator" >/</span>
            </span>
            <span>
				<a class="ant-breadcrumb-link" href="${ctx}/job/jobs?id=${buildJob.versionId}">${buildJob.versionName}</a>
                <span class="ant-breadcrumb-separator" >/</span>
            </span>
			<span >
                <span class="ant-breadcrumb-link">${buildJob.jobName}</span>
                <span class="ant-breadcrumb-separator" >/</span>
            </span>
	</div>
</div>
<div class="container-solid">
	<div class="container p20">
			<div class="row bg-fff">

			<ul class="ant-menu ant-menu-horizontal  ant-menu-light ant-menu-root">
				<li class="<c:if test="${active=='jobs'}">ant-menu-item-selected</c:if> ant-menu-item" >
					<a href="${ctx}/project/detail?id=${project.id}">
						<span> Tasks </span>
					</a>
				</li>
			</ul>

			<div class="col-md-12 pb10">
				<div class="bs-callout bs-callout-info row placeholders" style="padding-bottom:0px;margin-top: 10px; margin-bottom:10px; margin-left:1px; margin-right:1px;">
					<div class="col-xs-6 col-sm-4 placeholder">
						<div id="t-build" class="panel panel-info">
						   <div class="panel-heading">
							  <h3 class="panel-title">Build Task</h3>
						   </div>
						   <div class="panel-body">
								<ul class="fa-ul">
									<li><i id="i-build" class="fa-li fa fa-check-square"></i><a href="javascript:getLog('build');">Build</a></li>
								</ul>
						   </div>
						</div>
					</div>
					<div class="col-xs-6 col-sm-4 placeholder">
						<div id="t-test" class="panel panel-success">
						   <div class="panel-heading">
							  <h3 class="panel-title">Test Task</h3>
						   </div>
						   <div class="panel-body">
								<ul class="fa-ul">
									<li><i id="i-test" class="fa-li fa fa-play-circle"></i><a href="javascript:doRun('test',${buildJob.id});">Test</a></li><!--fa-li fa fa-spinner fa-spin-->
								</ul>
						   </div>
						</div>
					</div>
					<div class="col-xs-6 col-sm-4 placeholder">
						<div id="t-deploy" class="panel panel-warning">
						   <div class="panel-heading">
							  <h3 class="panel-title">Deploy Task</h3>
						   </div>
						   <div class="panel-body">
								<ul class="fa-ul">
									<li><i id="i-deploy" class="fa-li fa fa-play-circle"></i><a href="javascript:doRun('deploy',${buildJob.id});">Deploy</a></li>
								</ul>
						   </div>
						</div>
					</div>
				</div>
				<!--div style="padding-bottom:0px;">
					<p style="margin-bottom: 0px;">Project：<strong>${project.projName}</strong> \ <a href="${ctx}/project/jobs?id=${project.id}">${buildJob.jobName}</a></p>
				</div-->

				<div class="pre-scrollable" id="term-container">
					<div id="log-term"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<script language="javascript">
	var g_Term;

	$(function(){
		showStatus(${buildJob.jobStatus},'build');
		<c:if test="${testJob!=null}">
			showStatus(${testJob.jobStatus},'test');
		</c:if> 
		<c:if test="${deployJob!=null}">
			showStatus(${deployJob.jobStatus},'deploy');
		</c:if>

		g_Term = $('#log-term').terminal(function(command, term) {

		},{
			greetings : '.',
			prompt    : '#',
			name	  : 'xl_shell',
			width	  : 3000,
			onBlur: function() {
				return false;
			}
		});
		//
		getLog('build');

	});
	
	function showStatus(status,task){
		switch(status){
			case 0:
				$('#i-'+task).addClass('fa-spinner').addClass('fa-spin').removeClass('fa-check-square');
				getLog(task);
				break;
			case 1:
				$('#i-'+task).addClass('fa-check-square').removeClass('fa-spinner').removeClass('fa-spin').removeClass('fa-play-circle');
				break;
			default:
				$('#i-'+task).addClass('fa-check-square').removeClass('fa-spinner').removeClass('fa-spin').removeClass('fa-play-circle');
				$('#t-'+task).addClass('panel-danger').removeClass('panel-info').removeClass('panel-warning').removeClass('panel-success');
				break;
		}
	}
	//
	function getLog(task){
			$.getJSON(ctx+'/job/getLog?type='+task.toUpperCase()+'&id='+${buildJob.id},function (data){
				if(data != null && data.data != null){
					//$('#pre-id').text(data.data.jobDesc.replace(/\r/g,'\n'));
					echo(data.data.jobDesc);
					//
					if(data.data.jobStatus==0){
						var t =setInterval(function(){
								$.getJSON(ctx+'/job/getLog?type='+task.toUpperCase()+'&id='+${buildJob.id},function (data){
									if(data.data.jobStatus==1){
										clearInterval(t);
										$('#i-'+task).addClass('fa-check-square').removeClass('fa-spin').removeClass('fa-spinner');
									}else if(data.data.jobStatus==9){
										clearInterval(t);
										$('#i-'+task).addClass('fa-check-square').removeClass('fa-spin').removeClass('fa-spinner');
										$('#t-'+task).addClass('panel-danger').removeClass('panel-info').removeClass('panel-warning').removeClass('panel-success');
									}
									println(data.data.jobDesc);
									//$('#pre-id').text(data.data.jobDesc.replace(/\r/g,'\n'));
								});
							},2500);
					}else{
						clearInterval(t);
					}
				}else{
					setTimeout(function(){
						getLog(task);
					},2000);
				}
			});	
		}
		
		function doRun(task,pid){
			$('#i-'+task).addClass('fa-spinner').addClass('fa-spin').removeClass('fa-play-circle').removeClass('fa-check-square');
			$.getJSON(ctx+'/job/doRun?type='+task.toUpperCase()+'&m=1&id='+pid,function (data){
				if(data != null && data.data != null){
					//competed.
					$('#i-'+task).addClass('fa-check-square').removeClass('fa-spinner').removeClass('fa-spin');
					//$('#pre-id').text(data.data.jobDesc.replace(/\r/g,'\n'));
					echo(data.data.jobDesc);
					if(data.data.jobStatus==0){
						getLog(task);
					}
				}else{
					getLog(task);
				}
			});	
		}

	var g_text;
	/**
	*
	* @param text
	 */
	function echo(text){
		g_Term.clear();
		g_Term.echo(text.replace(/\r/g,'\n'), {wrapWords: true});
		scroll();
	}

	function println(text){
		g_Term.echo(getLine(text).replace(/\r/g,'\n'), {wrapWords: true});
		scroll();
	}
	/**
	 *
	 */
	function getLine(text){
		if(g_text != undefined && g_text !=''){
			var temp = text.substring(g_text.length,text.length);
			g_text = text;
			return temp;
		}else{
			g_text = text;
			return text;
		}
	}
	/**
	* 滚动到末尾
	 */
	function scroll(){
		$("#term-container").animate({
			scrollTop:99999
		});
	}
</script>
</body>
</html>
